<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>选择门店</title>
	<meta name="decorator" content="blank"/>
    <style type="text/css">
    	.page-header {clear:both;margin:0 20px;padding-top:20px;}
		.the-icons {padding:25px 10px 15px;list-style:none;}
		.the-icons li {float:left;width:22%;line-height:25px;margin:2px 5px;cursor:pointer;}
		.the-icons i {margin:1px 5px;font-size:16px;} .the-icons li:hover {background-color:#efefef;}
        .the-icons li.active {background-color:#0088CC;color:#ffffff;}
        .the-icons li:hover i{font-size:20px;}
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
    	var allAreaChecks=$("input[name^=areaStore]");  
    	var checks=$("input[name^=storeList]");
    
    	allAreaChecks.change(function() { 
	   		var me =this;
	   		var cks=eval("("+me.value+")");
            for(var i=0,length=checks.length;i<length;i++){
            	var boo=false;
            	var id=checks[i].value;
            	if(cks!=null&&cks.length>0){
            		for(var j=0,len=cks.length;j<len;j++){
                    	var ckId=cks[j];
                    	if(ckId==id){
                    		boo=true;
                    	}
                    }
            	}
            	if(boo){
            		checks[i].checked=me.checked;
            	}
            }
    	});
    	
    	checks.change(function(){
    		var me=this;
    		//拿到当前input的下标
    		var index = $(me).attr("name").substring(10,11);
    		var storeList = $("input[name=storeList_"+index+"]");
    		var checkCount = 0;
    		for(var i=0;i<storeList.length;i++){
    			if(storeList[i].checked){
    				checkCount++;
    			}
    		}
    		if(storeList.length == checkCount){
    			$("input[name=areaStore_"+index+"]").attr("checked",true);
    		}else{
    			$("input[name=areaStore_"+index+"]").attr("checked",false);
    		}
		})
    });
    </script>
</head>
<body>
	<c:set var="index" value="0" scope="page"></c:set>
	<form id="storeSelectForm"  class="form-horizontal" >
		<c:forEach items="${allChecks}" var="storeArea" varStatus="s" >
		<br>
			<c:if test="${fn:length(storeArea.storeList)!=0}">
				<div id="areaStore">
					<input type="checkbox" name="areaStore_${s.index}"  value="${storeArea.storeIds}">${storeArea.area}<br/>
					<c:forEach items="${storeArea.storeList}" var="bean">
						<input type="checkbox" name="storeList_${s.index}" value="${bean.id}" 
							<c:forEach items="${checkStoreList}" var="checkBean" >
								<c:if test = "${bean.id == checkBean.id}">
									checked="checked"
								</c:if>
							</c:forEach>
						 />${bean.cnName}
					</c:forEach>
					<br/><br/>
				</div>
			</c:if>
		</c:forEach>
		<br/><br/>
	</form>
</body>